<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .div2 {
            position: relative;
            top: 300px;
            left: 100px;
            width: 150px;
            height: 150px;
            background-color: indigo;
        }
    </style>
</head>

<body>
    <div id="div2" class="div2">

        <script>
            function dragTouch() {
                var isdrag = false;
                var NowLeft, disX;
                var NowTop, disY;
                var oldLeft, oldTop;

                var oDiv2 = document.getElementById("div2");

                //监听图标触摸开始事件
                oDiv2.addEventListener('touchstart', function (e) {
                    //复制原节点 
                    // var oldDiv = oDiv2.cloneNode(true);
                    // oldDiv.style.position = 'absolute';
                    // oldDiv.style.left = 0;
                    // oldDiv.style.top = 0
                    // //添加原节点
                    // document.body.appendChild(oldDiv);

                    //是否移动中
                    isdrag = true;
                    //当前位置
                    NowLeft = parseInt(window.getComputedStyle(oDiv2).left);
                    NowTop = parseInt(window.getComputedStyle(oDiv2).top);
                    //touches: 当前屏幕上所有触摸点的列表;
                    disX = e.touches[0].pageX; //触屏坐标
                    disY = e.touches[0].pageY;
                })

                //监听图标触摸结束事件
                oDiv2.addEventListener('touchend', function () {
                    isdrag = false;

                })
                //监听图标触摸移动事件
                oDiv2.addEventListener('touchmove', function (e) {
                    if (isdrag) {
                        console.log(e);
                        oDiv2.style.left = NowLeft + e.touches[0].pageX - disX + 'px'; //移动坐标位置-触屏坐标+初始坐标 = 现在位置
                        oDiv2.style.top = NowTop + e.touches[0].pageY - disY + 'px';
                    }
                })
            }

            dragTouch()
        </script>
</body>

</html>